<html>
    <head>
        <style type="text/css">
        body{
          text-align:center;
          background:#dfdfdf;
        }

        #subtitles {
          font-size: 72px;
          font-family:'Verdana';
          padding: 150px 30px 30px 30px;

          color: transparent;
          text-shadow: 0 0 5px rgba(0,0,0,0.8);
        }
        </style>
    </head>
    <body id="main">
        <div id="subtitles">
        </div>

        <script type="text/javascript" src="/cotonic.js" data-base-worker-src="/cotonic-worker.js"></script>
        <script>
            const decoder = new TextDecoder("utf-8");

            cotonic.mqtt_bridge.newBridge("test.mosquitto.org:8081", { name: 'bbc-bridge', protocol: "wss"});

            const subtitles = document.getElementById("subtitles");

            cotonic.broker.subscribe("bridge/bbc-bridge/bbc/subtitles/bbc_news24/raw",
                function(m, t) {
                    const s = decoder.decode(m.payload);
                    subtitles.innerHTML = s;
                });


        </script>
    </body>
</html>
